<template>
  <div class="tab-bar">
    <van-tabbar v-model="active" active-color="#3A7EF6" inactive-color="#7F8389" @change="onChange"
      :safe-area-inset-bottom=false>
      <van-tabbar-item to="/" replace key="1">
        <span>案例管理</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/employeeProfile" key="2" replace v-if="showProfile">
        <span>员工画像</span>
        <template #icon="props">
          <img :src="props.active ? icon2.active : icon2.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item to="/assessment" key="3" replace>
        <span>知识测评</span>
        <template #icon="props">
          <img :src="props.active ? icon3.active : icon3.inactive" />
        </template>
      </van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showProfile: false,

      active: 0,
      isactive: 0,
      icon: {
        active: require("@/assets/img/tabicons/nav1.png"),
        inactive: require("@/assets/img/tabicons/nav11.png"),
      },
      icon2: {
        active: require("@/assets/img/tabicons/nav2.png"),
        inactive: require("@/assets/img/tabicons/nav22.png"),
      },
      icon3: {
        active: require("@/assets/img/tabicons/nav3.png"),
        inactive: require("@/assets/img/tabicons/nav33.png"),
      },

    };
  },
  watch: {
    '$route.query.type': function () {
      this.setTab()
    },
    '$route'(val) {
      this.active = 0
      if (val.name == "employeeProfile") {
        this.active = 1
      }
    },
  },
  mounted() {
    this.showProfile = this.$store.state.showProfile == 1
    this.setTab()
    this.active = 0
    if (this.$route.name == "employeeProfile") {
      this.active = 1
    }
  },
  methods: {
    setTab() {
      if (this.$route.query.type) {
        this.active = Number(this.$route.query.type)
      } else {
        this.active = 0
      }
    },
    onChange(index) {
      // this.$store.dispatch('set_menulist')
      // this.isactive=index
      // console.log(this.active, index)
    },
  },

};
</script>

<style lang="less" scoped>
.tab-bar {
  .van-tabbar {
    height: auto;
    max-width: 750PX;
  }

  img {
    width: 42px;
    height: 42px;
  }

  .van-tabbar--fixed {
    left: 50%;
    transform: translateX(-50%);
  }

  .van-tabbar-item--active {
    color: #3A7EF6;
  }

  ::v-deep .van-tabbar-item__icon {
    margin-bottom: 6px;
  }

  ::v-deep .van-tabbar-item {
    padding: 12px 0 48px;
    box-sizing: border-box;
  }

  ::v-deep .van-tabbar-item {
    font-size: 18px;
  }
}

// ::v-deep .van-tabbar--fixed {
//   max-width: 750PX;
//   left: 50%;
//   transform: translateX(-50%);
// }

// ::v-deep .van-tabbar-item {
//   padding: 14px 0 60px;
//   box-sizing: border-box;

//   img {
//     height: 40px;
//   }
// }

// ::v-deep .van-tabbar-item__text {
//   font-size: 18px;
// }</style>